
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-earth"></use>
                    </svg>
                    <div class="name">earth</div>
                    <div class="fontclass">#icon-earth</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-capital-1"></use>
                    </svg>
                    <div class="name">bullseye</div>
                    <div class="fontclass">#icon-capital-1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-polygon"></use>
                    </svg>
                    <div class="name">多边形</div>
                    <div class="fontclass">#icon-polygon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-city-1"></use>
                    </svg>
                    <div class="name">radio</div>
                    <div class="fontclass">#icon-city-1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-save"></use>
                    </svg>
                    <div class="name">save</div>
                    <div class="fontclass">#icon-save</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-polyline"></use>
                    </svg>
                    <div class="name">折线</div>
                    <div class="fontclass">#icon-polyline</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rule"></use>
                    </svg>
                    <div class="name">测量</div>
                    <div class="fontclass">#icon-rule</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-marker"></use>
                    </svg>
                    <div class="name">marker</div>
                    <div class="fontclass">#icon-marker</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-capital"></use>
                    </svg>
                    <div class="name">capital</div>
                    <div class="fontclass">#icon-capital</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cavalryman"></use>
                    </svg>
                    <div class="name">cavalryman</div>
                    <div class="fontclass">#icon-cavalryman</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ancient-soldier"></use>
                    </svg>
                    <div class="name">ancient-soldier</div>
                    <div class="fontclass">#icon-ancient-soldier</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-archer"></use>
                    </svg>
                    <div class="name">archer</div>
                    <div class="fontclass">#icon-archer</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-county"></use>
                    </svg>
                    <div class="name">county</div>
                    <div class="fontclass">#icon-county</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-province"></use>
                    </svg>
                    <div class="name">province</div>
                    <div class="fontclass">#icon-province</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mountain-gun"></use>
                    </svg>
                    <div class="name">mountain-gun</div>
                    <div class="fontclass">#icon-mountain-gun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-city"></use>
                    </svg>
                    <div class="name">city</div>
                    <div class="fontclass">#icon-city</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-province-"></use>
                    </svg>
                    <div class="name">province</div>
                    <div class="fontclass">#icon-province-</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-triangle"></use>
                    </svg>
                    <div class="name">triangle</div>
                    <div class="fontclass">#icon-triangle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-castle"></use>
                    </svg>
                    <div class="name">triangle</div>
                    <div class="fontclass">#icon-castle</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tank"></use>
                    </svg>
                    <div class="name">tank</div>
                    <div class="fontclass">#icon-tank</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hole"></use>
                    </svg>
                    <div class="name">hole</div>
                    <div class="fontclass">#icon-hole</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shape"></use>
                    </svg>
                    <div class="name">shape</div>
                    <div class="fontclass">#icon-shape</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-close"></use>
                    </svg>
                    <div class="name">close</div>
                    <div class="fontclass">#icon-close</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-folder-open"></use>
                    </svg>
                    <div class="name">folder_open</div>
                    <div class="fontclass">#icon-folder-open</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-download"></use>
                    </svg>
                    <div class="name">download</div>
                    <div class="fontclass">#icon-download</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-undo"></use>
                    </svg>
                    <div class="name">undo</div>
                    <div class="fontclass">#icon-undo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-remove"></use>
                    </svg>
                    <div class="name">remove</div>
                    <div class="fontclass">#icon-remove</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-done"></use>
                    </svg>
                    <div class="name">done</div>
                    <div class="fontclass">#icon-done</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-add"></use>
                    </svg>
                    <div class="name">add</div>
                    <div class="fontclass">#icon-add</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-more_vert"></use>
                    </svg>
                    <div class="name">more_vert</div>
                    <div class="fontclass">#icon-more_vert</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-redo"></use>
                    </svg>
                    <div class="name">redo</div>
                    <div class="fontclass">#icon-redo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-layers"></use>
                    </svg>
                    <div class="name">layers</div>
                    <div class="fontclass">#icon-layers</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-delete"></use>
                    </svg>
                    <div class="name">delete</div>
                    <div class="fontclass">#icon-delete</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ic_file_download_bla"></use>
                    </svg>
                    <div class="name">file-download</div>
                    <div class="fontclass">#icon-ic_file_download_bla</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ic_file_upload_black"></use>
                    </svg>
                    <div class="name">file-upload</div>
                    <div class="fontclass">#icon-ic_file_upload_black</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-castle-1"></use>
                    </svg>
                    <div class="name">castle-2</div>
                    <div class="fontclass">#icon-castle-1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-castle1"></use>
                    </svg>
                    <div class="name">castle</div>
                    <div class="fontclass">#icon-castle1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cavalryman-2"></use>
                    </svg>
                    <div class="name">cavalryman-1</div>
                    <div class="fontclass">#icon-cavalryman-2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cavalryman-1"></use>
                    </svg>
                    <div class="name">cavalryman-2</div>
                    <div class="fontclass">#icon-cavalryman-1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-harbor"></use>
                    </svg>
                    <div class="name">harbor</div>
                    <div class="fontclass">#icon-harbor</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-police"></use>
                    </svg>
                    <div class="name">police</div>
                    <div class="fontclass">#icon-police</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shield"></use>
                    </svg>
                    <div class="name">shield</div>
                    <div class="fontclass">#icon-shield</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ship"></use>
                    </svg>
                    <div class="name">ship</div>
                    <div class="fontclass">#icon-ship</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ship-1"></use>
                    </svg>
                    <div class="name">ship-1</div>
                    <div class="fontclass">#icon-ship-1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-soldier"></use>
                    </svg>
                    <div class="name">soldier</div>
                    <div class="fontclass">#icon-soldier</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wall"></use>
                    </svg>
                    <div class="name">wall</div>
                    <div class="fontclass">#icon-wall</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-war"></use>
                    </svg>
                    <div class="name">war</div>
                    <div class="fontclass">#icon-war</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-airport"></use>
                    </svg>
                    <div class="name">airport</div>
                    <div class="fontclass">#icon-airport</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bar"></use>
                    </svg>
                    <div class="name">bar</div>
                    <div class="fontclass">#icon-bar</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bicycle-share"></use>
                    </svg>
                    <div class="name">bicycle-share</div>
                    <div class="fontclass">#icon-bicycle-share</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-buddhism"></use>
                    </svg>
                    <div class="name">buddhism</div>
                    <div class="fontclass">#icon-buddhism</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bus"></use>
                    </svg>
                    <div class="name">bus</div>
                    <div class="fontclass">#icon-bus</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-car"></use>
                    </svg>
                    <div class="name">car</div>
                    <div class="fontclass">#icon-car</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cross"></use>
                    </svg>
                    <div class="name">cross</div>
                    <div class="fontclass">#icon-cross</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-danger"></use>
                    </svg>
                    <div class="name">danger</div>
                    <div class="fontclass">#icon-danger</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fence"></use>
                    </svg>
                    <div class="name">fence</div>
                    <div class="fontclass">#icon-fence</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fuel"></use>
                    </svg>
                    <div class="name">fuel</div>
                    <div class="fontclass">#icon-fuel</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-grocery"></use>
                    </svg>
                    <div class="name">grocery</div>
                    <div class="fontclass">#icon-grocery</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-horse-riding"></use>
                    </svg>
                    <div class="name">horse-riding-</div>
                    <div class="fontclass">#icon-horse-riding</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hospital"></use>
                    </svg>
                    <div class="name">hospital</div>
                    <div class="fontclass">#icon-hospital</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-industry"></use>
                    </svg>
                    <div class="name">industry</div>
                    <div class="fontclass">#icon-industry</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-library"></use>
                    </svg>
                    <div class="name">library</div>
                    <div class="fontclass">#icon-library</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-landmark"></use>
                    </svg>
                    <div class="name">landmark</div>
                    <div class="fontclass">#icon-landmark</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mountain"></use>
                    </svg>
                    <div class="name">mountain</div>
                    <div class="fontclass">#icon-mountain</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-park"></use>
                    </svg>
                    <div class="name">park</div>
                    <div class="fontclass">#icon-park</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-park-alt"></use>
                    </svg>
                    <div class="name">park-alt</div>
                    <div class="fontclass">#icon-park-alt</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-music"></use>
                    </svg>
                    <div class="name">music</div>
                    <div class="fontclass">#icon-music</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-place-of-worship"></use>
                    </svg>
                    <div class="name">place-of-worship</div>
                    <div class="fontclass">#icon-place-of-worship</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-police1"></use>
                    </svg>
                    <div class="name">police</div>
                    <div class="fontclass">#icon-police1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-post"></use>
                    </svg>
                    <div class="name">post</div>
                    <div class="fontclass">#icon-post</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rail"></use>
                    </svg>
                    <div class="name">rail</div>
                    <div class="fontclass">#icon-rail</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ranger-station"></use>
                    </svg>
                    <div class="name">ranger-station</div>
                    <div class="fontclass">#icon-ranger-station</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-religious-muslim"></use>
                    </svg>
                    <div class="name">religious-muslim</div>
                    <div class="fontclass">#icon-religious-muslim</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-religious-christian"></use>
                    </svg>
                    <div class="name">religious-christian</div>
                    <div class="fontclass">#icon-religious-christian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-residential-communit"></use>
                    </svg>
                    <div class="name">residential-communit</div>
                    <div class="fontclass">#icon-residential-communit</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-restaurant"></use>
                    </svg>
                    <div class="name">restaurant</div>
                    <div class="fontclass">#icon-restaurant</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-scooter"></use>
                    </svg>
                    <div class="name">scooter</div>
                    <div class="fontclass">#icon-scooter</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-soccer"></use>
                    </svg>
                    <div class="name">soccer</div>
                    <div class="fontclass">#icon-soccer</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-square-stroked"></use>
                    </svg>
                    <div class="name">square-stroked</div>
                    <div class="fontclass">#icon-square-stroked</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-square"></use>
                    </svg>
                    <div class="name">square</div>
                    <div class="fontclass">#icon-square</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-star-stroked"></use>
                    </svg>
                    <div class="name">star-stroked</div>
                    <div class="fontclass">#icon-star-stroked</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-star"></use>
                    </svg>
                    <div class="name">star</div>
                    <div class="fontclass">#icon-star</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-swimming"></use>
                    </svg>
                    <div class="name">swimming</div>
                    <div class="fontclass">#icon-swimming</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-town"></use>
                    </svg>
                    <div class="name">town</div>
                    <div class="fontclass">#icon-town</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-toilet"></use>
                    </svg>
                    <div class="name">toilet</div>
                    <div class="fontclass">#icon-toilet</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-town-hall"></use>
                    </svg>
                    <div class="name">town-hall</div>
                    <div class="fontclass">#icon-town-hall</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-triangle-1"></use>
                    </svg>
                    <div class="name">triangle</div>
                    <div class="fontclass">#icon-triangle-1</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
